<template>
  <div>
    <el-tabs v-model="activeTabName" type="card">
      <el-tab-pane v-if="isAllowAccountLogin" label="账号登录" name="accountLogin">
        <form-auth-login-account
            class=""
            :auth-guard="authGuard"
            :data-guard-config="guardConfig"
            :form-label-width="formLabelWidth"
            v-on:logined="handleLogined"
        >

        </form-auth-login-account>


      </el-tab-pane>
      <el-tab-pane v-if="isAllowMobileLogin" label="手机验证登录" name="mobileLogin">
        <form-auth-login-mobile
            class=""
            :auth-guard="authGuard"
            :data-guard-config="guardConfig"
            :form-label-width="formLabelWidth"
            v-on:logined="handleLogined"
        >

        </form-auth-login-mobile>

      </el-tab-pane>
      <el-tab-pane v-if="isAllowEmailLogin" label="邮箱验证登录" name="emailLogin">
        <form-auth-login-email
            class=""
            :auth-guard="authGuard"
            :data-guard-config="guardConfig"
            :form-label-width="formLabelWidth"
            v-on:logined="handleLogined"
        >

        </form-auth-login-email>
      </el-tab-pane>
    </el-tabs>
    <div>
      <el-link v-for="(third,index) in (thirdPartyLoginLinks||[])" :key="index" :href="third.url" class="me-3"
               v-html="third.name"></el-link>
    </div>
  </div>


</template>

<script>
import ApiAuth from '../services/api-auth'

export default {
  components: {},
  props: {

    formLabelWidth: {
      type: String,
      default: '100px'
    },
    authGuard: {
      type: String,
      default: 'api'
    },
    dataGuardConfig: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },

  data() {
    return {
      activeTabName: "accountLogin",
      guardConfig: {},
      thirdPartyLoginLinks: [],

    }
  },
  computed: {
    isAllowAccountLogin: function () {
      return LeUtils.valueGet(this.guardConfig, 'allow_account_login', false);
    },
    isAllowMobileLogin: function () {
      return LeUtils.valueGet(window, 'LeServiceCaptchaRegistered', false)
          && LeUtils.valueGet(this.guardConfig, 'allow_mobile_login', false);
    },
    isAllowEmailLogin: function () {
      return LeUtils.valueGet(window, 'LeServiceCaptchaRegistered', false)
          && LeUtils.valueGet(this.guardConfig, 'allow_email_login', false);
    },
    isAllowThirdPartyLogin: function () {
      return LeUtils.valueGet(this.guardConfig, 'allow_third_path_login', '');
    },
  },
  async created() {
    let _this = this;
    if (!LeUtils.isEmpty(_this.dataGuardConfig)) {
      _this.guardConfig = _this.dataGuardConfig;
    } else {
      await ApiAuth.loadConfig(_this.authGuard).then(function (data) {
        _this.guardConfig = data;
      })
    }
    _this.activeTabName = _this.checkActiveTabName();

    if (_this.isAllowThirdPartyLogin) {
      LeRoute.quiet().request('api.l-e-s.third_party_login.links', {
        guard: _this.authGuard,
        back_url: window.location.href,
        bind_user: 0,
      })
          .then(function (res_data) {
            _this.thirdPartyLoginLinks = LeUtils.valueGet(res_data, 'data', []);

          })
    }
    ;

  },
  beforeDestroy() {

  },
  mounted() {
    let _this = this

  },
  methods: {
    joinToString: function (obj, glue) {
      return LeUtils.joinToString(obj, glue)
    },
    handleLogined: function (user,token) {
      this.$emit('logined', user, token);
    },
    checkActiveTabName: function () {
      if (this.isAllowAccountLogin) {
        return "accountLogin";
      }
      if (this.isAllowMobileLogin) {
        return "mobileLogin";
      }
      if (this.isAllowEmailLogin) {
        return "emailLogin";
      }

      return ""
    },

  }
}
</script>
